<template>
  <a-form-model
    class="operator-configuration"
    layout="vertical"
    :model="config.value"
  >
    <a-form-model-item
      v-for="item in renderParamsList"
      :key="item.name"
      :label="item.label || item.name"
    >
      <component
        :is="getCompType(item)"
        v-model="config.value[item.name]"
        v-bind="{
          ...commonFormProps,
          placeholder: item.tips,
          options: item.options,
          disabled: disabled || item.status === 'disable',
          step: getCompStep(item),
        }"
      />
    </a-form-model-item>
  </a-form-model>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'

interface IParamItem {
  name: string
  value: any
  type: string
  default: any
  english_name: string
  tips: string
  items?: string[]
  label: string
  step?: number
  options?: Array<{ value: string; label: string }>
  status: 'normal' | 'disable' | 'hide'
  newFeatures?: any[]
}

interface IConfig {
  params: IParamItem[]
}

@Component
export default class OperatorConfiguration extends Vue {
  @Prop() config!: IConfig
  @Prop({ default: false }) disabled!: boolean

  private commonFormProps = {
    disabled: this.disabled,
    size: 'small',
  }

  private get renderParamsList() {
    const { params } = this.config
    const list = params.filter((item) => item.status !== 'hide')
    return this.parseParamsListOptions(list)
  }

  /**
   * 获取动态组件类型
   */
  private getCompType(item: IParamItem): string {
    const result = 'a-input'
    const mapping: any = {
      number: 'a-input-number',
      checkbox: 'a-checkbox-group',
      select: 'a-select',
      string: 'a-input',
      int: 'a-input-number',
    }
    if (mapping[item.type]) {
      return mapping[item.type]
    }
    return result
  }

  /**
   * 处理配置选项
   */
  private parseParamsListOptions(list: IParamItem[]) {
    const type = new Set(['select', 'checkbox'])
    list.forEach((item) => {
      if (type.has(item.type)) {
        item.options = (item.items || []).map((l) => ({ value: l, label: l }))
      }
      if (item.newFeatures && item.newFeatures.length > 0) {
        const newFeatures = item.newFeatures[0]
        item.options = (newFeatures.tableCols || []).map((l: string) => ({
          value: `${newFeatures.tableName}.${l}`,
          label: l,
        }))
      }
    })
    return list
  }

  private getCompStep(item: IParamItem) {
    if (!['number', 'int'].includes(item.type)) {
      return 1
    }
    const { value, step = 1 } = item
    return (value * step) / 100 // 目前默认为百分数
  }
}
</script>

<style lang="less" scoped>
.operator-configuration {
  height: 100%;
  overflow-y: auto;
  padding: 20px;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(144, 147, 153, 0.5);
    border-radius: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 5px;
  }

  /deep/ .ant-form-item {
    margin-bottom: 0;
  }

  /deep/ .ant-input-number {
    width: 100%;
  }
}
</style>
